import {useLocation, useOutletContext} from "react-router-dom"
import {useEffect, useState} from "react"
import waitPack from './wait-pack.svg'
import Address from "./address"
import {getOrderDetail} from "../../request/order"
import {message} from "antd"
import ItemInfo from "./item-info"

function OrderDetail({orderId}) {
    const [setTitle, setBack] = useOutletContext()
    useEffect(() => {
        if (orderId) return
        setTitle('订单详情')
        setBack(-1)
    }, [orderId, setBack, setTitle])
    const [order, setOrder] = useState({items: []})
    const location = useLocation()
    if (!orderId) orderId = location.state.orderId
    useEffect(() => {
        getOrderDetail(orderId).then(setOrder).catch(({msg}) => message.error(msg))
    }, [orderId])
    
    return (
        <>
            <div className="order-status-container">
                <img src={waitPack} alt=""/>
                <span>等待发货</span>
            </div>
            <Address />
            <div className="split-line"></div>
            <b className="row">商品信息</b>
            {order.items.map((item, i) => (
                <ItemInfo key={i} {...item}/>
            ))}
            <div className="row prop">
                <span>商品合计</span>
                <span>￥{order.total_price}</span>
            </div>
            <div className="row prop">
                <span>运费</span>
                <span>￥{order.freight}</span>
            </div>
            <div className="row prop">
                <span>实付款</span>
                <span>￥{order.actual_price}</span>
            </div>
            <div className="row prop">
                <span>备注</span>
                <span>{order.note ? order.note : '【无】'}</span>
            </div>
            <div className="row prop">
                <span>订单编号</span>
                <span>{order.id}</span>
            </div>
            <div className="row prop">
                <span>提交时间</span>
                <span>{order.created_at}</span>
            </div>
            <div className="row prop">
                <span>支付方式</span>
                <span>{order.pay_way}</span>
            </div>
            <div className="row prop">
                <span>支付时间</span>
                <span>{order.payed_at}</span>
            </div>
        </>
    )
}

export default OrderDetail